<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-warm layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
        </script>

    </div>
</div>
<!--编辑的弹出层-->
<div class="layuimini-main" id="hiddenForm" style="display: none">
    <form class="layui-form layuimini-form" id="itemForm">
        <div class="layui-form-item">
            <label class="layui-form-label required">项目编号</label>
            <div class="layui-input-inline">
                <input type="hidden" name="yfbItemId" id="yfbItemId">
                <input type="text" id="yfbItemNumber" name="yfbItemNumber" lay-verify="title" autocomplete="off" placeholder="请输入项目编号" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <span style="color: #FF5722;">谨慎修改</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">项目名</label>
            <div class="layui-input-inline">
                <input type="text" id="yfbItemName" name="yfbItemName" lay-verify="title" autocomplete="off" placeholder="请输入项目名" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <span style="color: #FF5722;">谨慎修改</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">项目状态</label>
            <div class="layui-input-inline">
                <select name="yfbItemStatus" id="yfbItemStatus" lay-filter="filter" lay-verify="title" class="verify">
                    <option >选择项目状态</option>
                    <option value="开发中">开发中</option>
                    <option value="已发布">已发布</option>
                    <option value="搁置">搁置</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <span style="color: #FF5722;">谨慎修改</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">启动日期</label>
            <div class="layui-input-inline">
                <!--只回显，不修改-->
                <input type="text" id="yfbItemCreatetime" name="yfbItemCreatetime" class="layui-input" readonly="true">
<!--                <span class="layui-input" id="yfbItemCreatetime" style="display:table-cell; vertical-align:middle;  text-align: center; "></span>-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">发布日期</label>
            <div class="layui-input-inline">
                <input type="text" id="yfbItemCompletetime" name="yfbItemCompletetime" lay-verify="title" autocomplete="off" placeholder="请选择发布日期" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">启动版本</label>
            <div class="layui-input-inline" >
                <input type="text" id="yfbItemFirstVersion" name="yfbItemFirstVersion" class="layui-input" readonly="true">
<!--                <span class="layui-input" id="yfbItemFirstVersion" style="display:table-cell; vertical-align:middle"></span>-->
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">发布版本</label>
            <div class="layui-input-inline">
                <input type="text" id="yfbItemLastVersion" name="yfbItemLastVersion" lay-verify="title" autocomplete="off" placeholder="请填写发布版本" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </form>
</div>

<!--隐藏层-->
<div class="widthHeight layui-tab-item "  style="display: none" id="detail">
    <form lay-filter="bookForm" class="layui-form-item" style="margin-left: 0;max-width: 460px; padding-top: 40px;">

        <!--需求计划-->
        <div class="layui-form-item">
            <label class="layui-form-label">需求计划书</label>
            <div class="layui-input-block" >
                <textarea id="demandBook" style="width: 600px; height: 200px; display: none;"></textarea>
            </div>
        </div>
        <!--设计计划-->
        <div class="layui-form-item">
            <label class="layui-form-label">设计计划书</label>
            <div class="layui-input-block">
                <textarea id="designBook" style="width: 600px; height: 200px; display: none;" ></textarea>
            </div>
        </div>
        <!--测试计划-->
        <div class="layui-form-item">
            <label class="layui-form-label" >测试计划书</label>
            <div class="layui-input-block">
                <textarea id="testBook" style="width: 600px; height: 200px; display: none;" ></textarea>
            </div>
        </div>
        <!--按钮-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认修改</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'table','miniPage','element', 'layer', 'laydate', 'tableSelect'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            layer = layui.layer,
            tableSelect = layui.tableSelect,
            laydate = layui.laydate;

        form.render();

        //加载数据
        table.render({
            elem: '#currentTableId',
            url: '/yfb/allItems',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "numbers", width: 50},
                {field: 'yfbItemNumber', title: '项目编号', sort: true, minWidth: 110},
                {field: 'yfbItemName', title: '项目名', sort: true, minWidth: 110},
                {field: 'yfbItemStatus', title: '项目状态', sort: true, minWidth: 110},
                {field: 'yfbItemCreatetime', title: '创建时间', sort: true, minWidth: 110},
                {field: 'yfbItemCompletetime', title: '发布时间', sort: true, minWidth: 110},
                {field: 'yfbItemFirstVersion', title: '启动版本', sort: true, minWidth: 110},
                {field: 'yfbItemLastVersion', title: '发布版本', sort: true, minWidth: 110},
                {field: 'yfbItemBookId', title: '计划书', minWidth: 80, templet: function (d) {
                        return '<input lay-event="book" lay-verify="book" type="button" class="layui-btn layui-btn-normal layui-btn-xs" value="详情">';
                    }},
                {field: 'yfbItemDesignId', title: '设计详情', minWidth: 90, templet: function (d) {
                        return '<input lay-event="design" lay-verify="design" type="button" class="layui-btn layui-btn-normal layui-btn-xs" value="详情">';
                    }},
                {field: 'yfbItemTestId', title: '测试报告', minWidth: 90, templet: function (d) {
                        return '<input lay-event="test" lay-verify="test" type="button" class="layui-btn layui-btn-normal layui-btn-xs" value="详情">';
                    }},
                {field: 'yfbItemRespId', title: '负责人', minWidth: 80, templet: function (d) {
                        return '<input lay-event="peopele" lay-verify="people" type="button" class="layui-btn layui-btn-normal layui-btn-xs" value="详情">';
                    }},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center", minWidth: 90}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        //日期
        laydate.render({
            elem: '#yfbItemCompletetime'
        });

        //监听右侧操作栏
        table.on('tool(currentTableFilter)', function (obj) {
            let data = obj.data;  //获取当前行数据
            if (obj.event === 'edit') {
                // let content = miniPage.getHrefContent('#hiddenForm');
                let openWH = miniPage.getOpenWidthHeight();

                let index = layer.open({
                    title: '编辑项目',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: $("#hiddenForm"),
                    shade: 0, //不显示遮罩
                    success: function(layero, index){
                        $.get("/yfb/getItemById",
                            {"yfbItemId": data.yfbItemId},
                            function (result) {
                                if(result.code == 0) {
                                    form.render("select");
                                    //项目id
                                    $("#yfbItemId").val(result.data.yfbItemId);
                                    //项目编号
                                    $("#yfbItemNumber").val(result.data.yfbItemNumber);
                                    //项目名
                                    $("#yfbItemName").val(result.data.yfbItemName);
                                    //项目状态：下拉列表。指定value=xx的被选中
                                    $("#yfbItemStatus option[value='"+result.data.yfbItemStatus+"']").prop("selected", true);
                                    //创建时间
                                    $("#yfbItemCreatetime").val(result.data.yfbItemCreatetime);
                                    //发布时间
                                    $("#yfbItemCompletetime").val(result.data.yfbItemCompletetime);
                                    //启动版本
                                    $("#yfbItemFirstVersion").val(result.data.yfbItemFirstVersion);
                                    //发布版本
                                    $("#yfbItemLastVersion").val(result.data.yfbItemLastVersion);
                                    form.render();
                                }
                            });

                        form.render();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'book') {
                // let content = miniPage.getHrefContent('#hiddenForm');
                let openWH = miniPage.getOpenWidthHeight();

                let index = layer.open({
                    title: '编辑计划书',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: $("#detail"),
                    shade: 0, //不显示遮罩
                    success: function(layero, index){

                        $.get("/yfb/getItemById",
                            {"yfbItemId": data.yfbItemId},
                            function (result) {
                                if(result.code == 0) {
                                    form.render("select");
                                    //项目id
                                    $("#demandBook").text(result.data.yfbBooks[0].yfbBookContent);
                                    $("#demandBook").css("display", "block");
                                    //项目编号
                                    $("#designBook").text(result.data.yfbBooks[1].yfbBookContent);
                                    $("#designBook").css("display", "block");
                                    //项目名
                                    $("#testBook").text(result.data.yfbBooks[2].yfbBookContent);
                                    $("#testBook").css("display", "block");
                                    form.render();
                                }
                            });

                        form.render();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'design') {
                // let content = miniPage.getHrefContent('#hiddenForm');
                let openWH = miniPage.getOpenWidthHeight();

                let index = layer.open({
                    title: '编辑计划书',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: $("#detail"),
                    shade: 0, //不显示遮罩
                    success: function(layero, index){

                        $.get("/yfb/getById",
                            {"yfbItemId": data.yfbItemId},
                            function (result) {
                                if(result.code == 0) {
                                    form.render("select");
                                    //项目id
                                    $("#demandBook").text(result.data.yfbBooks[0].yfbBookContent);
                                    $("#demandBook").css("display", "block");
                                    //项目编号
                                    $("#designBook").text(result.data.yfbBooks[1].yfbBookContent);
                                    $("#designBook").css("display", "block");
                                    //项目名
                                    $("#testBook").text(result.data.yfbBooks[2].yfbBookContent);
                                    $("#testBook").css("display", "block");
                                    form.render();
                                }
                            });

                        form.render();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            layer.confirm('是否修改项目？', function (index) {
                $.get("/yfb/updateItem",
                    $("#itemForm").serialize(),
                    function(result) {
                        if(result.code == 0) {
                            console.log($("#itemForm").serialize());
                            layer.closeAll();
                            //重载表格
                            table.reload('currentTableId', {
                                url: '/yfb/allItems'
                            });
                            layer.msg("修改成功");
                        }
                    }, "json");
            });
            return false;
        });
        //监听提交
        form.on('submit(bookForm)', function (data) {
            layer.confirm('是否修改项目？', function (index) {
                layer.close(index);
            });
            return false;
        });

    });
</script>